import useStore from '@/context/useStore';
import useUrl from '@/hooks/useUrl';
import { ILoginForm } from '@/utils/types';
import { Form, Input, Button } from 'antd';
import { Col, message } from 'antd';
import { observer } from 'mobx-react-lite';
import { useEffect } from 'react';
import { Link, useHistory } from 'umi';
import styles from './login.less';

const Login = () => {
  const {user} = useStore();
  const history = useHistory();
  const urlInfo = useUrl();
  useEffect(() => {
    user.setLogin();
  }, [])

  const onFinish = async (values: ILoginForm) => {
    let result = await user.login(values);
    if (result){
      message.success('登陆成功');
      debugger
      console.log('urlInfo', urlInfo);
      if (urlInfo.qs.from){
        history.replace(urlInfo.qs.from)
      }
      history.replace('/');
    }else{
      message.success('登陆失败');
    }
  };

  return (
    <div className={styles.loginWrap}>
      <Col
        xs={{ span: 20, offset: 2 }}
        md={{ span: 16, offset: 4 }}
        lg={{ span: 12, offset: 6 }}>
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        autoComplete="off"
        validateTrigger="onBlur"
      >
        <Form.Item
          wrapperCol={{
            offset: 6,
            span: 18
          }}
        >
          <h1>系统登陆</h1>
        </Form.Item>
        <Form.Item
          label="账户"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入正确的用户名!',
            },
          ]}
        >
          <Input placeholder="请输入用户名!"/>
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: '请输入正确的密码!',
            },
          ]}
        >
          <Input.Password placeholder="请输入密码!"/>
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 6,
            span: 18
          }}
        >
          <Button className={styles.loginBtn} type="primary" htmlType="submit">
            登陆
          </Button>
          <p>or
            <Link to="/register">注册用户</Link>
          </p>
        </Form.Item>
      </Form>
      </Col>

    </div>
  );
}

export default observer(Login);
